<template>
    <!--<div>-->
        <!--<div class="cesiumcontainer" ref="earthContainer"></div>-->
    <!--</div>-->
    <div ref="cesiumContainer"></div>

</template>

<script>

    export default {
        name: "cesiummap",
        static(){
          return{

          }
        },
        data(){
            return{

            }
        },


        beforeDestroy() {
            this.removeViewer();
            //console.log('cesiummap-destroy');
        },
        activated() {

            // if(!this.cesiumViewer ){
            //     this.initViewer();
            // }
            this.initViewer();

            //console.log('cesiummap-activated')
        },
        deactivated() {


           this.removeViewer();
            //console.log('cesiummap-deactivated')
        },
        methods: {
            initViewer(){
                let cesiumDiv = this.$refs.cesiumContainer.querySelector('#cesiumDiv');
                if(!cesiumDiv) {
                    cesiumDiv = document.getElementById('cesiumDiv');
                    if(cesiumDiv){
                        cesiumDiv.style.display = 'block';
                        cesiumDiv.parentNode.removeChild(cesiumDiv);
                        this.$refs.cesiumContainer.appendChild(cesiumDiv);
                    }


                }
            },
            removeViewer(){
                let cesiumDiv = this.$refs.cesiumContainer.querySelector('#cesiumDiv');
                if(cesiumDiv) {
                    cesiumDiv.style.display = 'none';
                    cesiumDiv.parentNode.removeChild(cesiumDiv);
                    document.body.appendChild(cesiumDiv);
                }

            },

        },
        mounted() {
                this.initViewer();


        }
    }
</script>

<style scoped>

    .cesiumcontainer {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
